<script>
export default {
  data: function () {
    return {
      radius: 0
    }
  },
  computed: {
    girth : function () {
      return 2 * this.radius * Math.PI
    } 
  },
  methods: {
    handleInput: function (event) {
      this.radius = event.target.value
    }
  }
}
</script>

<template>
  <div> Ref: https://v3.cn.vuejs.org/guide/computed.html </div>

  <h1> Use Computed Data </h1>

  <div> Input Radius: <input @input="handleInput" value="0" /> </div>

  <div> calculated girth = {{ girth }}</div>

</template>

<style scoped>
.basic {
  color: #FF0000;
}
.bold {
  font-weight: bold;
}
</style>
